<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" href="111.scss配置.css">
<style>
   html,
   body {
       height: 100vh;
   }
  
   html {
       font-size: 26.667vw;
   }
  
   body {
     font-size: 0.16rem;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }

  .father{
    width: 1000px;
  }
</style>
<body>
  <div class="father">
    <div class="son1">
      <div class="sun1">sun1</div>
    </div>
    <div class="son2">son2</div>
  </div>
  <h2>一、是什么</h2>
  <div>扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便,本质上，预处理是Css的超集</div>
  <h2>二、有哪些</h2>
  <div>Css预编译语言在前端里面有三大优秀的预编处理器，分别是：</div>
  <ul>
    <li>sass</li>
    <li>less</li>
  </ul>
  <h4>sass</h4>
  <div>2007 年诞生，最早也是最成熟的 Css预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 Css框架，目前受 LESS 影响，已经进化到了全面兼容 Css 的 Scss</div>
  <br>
  <div>文件后缀名为.sass与scss，可以严格按照 sass 的缩进方式省去大括号和分号</div>
  <h4>less</h4>
  <div>2009年出现，受SASS的影响较大，但又使用 Css 的语法，让大部分开发者和设计师更容易上手，在 Ruby社区之外支持者远超过 SASS</div>
  <h4>stylus</h4>
  <div>Stylus是一个Css的预处理框架，2010 年产生，来自 Node.js社区，主要用来给 Node 项目进行 Css 预处理支持</div>
</body>
<script>
</script>
</html>